<template>
  <div class="rank-list">
	<div>
		<h4>官方榜</h4>
		<div class="rank-list-content">
			<rank-list-item  v-if="topList[0]" :topList='topList[0]' :detailList="detailList[0]" :bg-color="['#56a1e3', '#5a8beb']"></rank-list-item>
			<rank-list-item v-if="topList[1]" :topList='topList[1]' :detailList="detailList[1]"  :bg-color="['#d53d6a', '#eb638d']"></rank-list-item>
			<rank-list-item v-if="topList[2]" :topList='topList[2]' :detailList="detailList[2]" :bg-color="['#c7523c', '#cc7455']"></rank-list-item>
			<rank-list-item v-if="topList[3]" :topList='topList[3]' :detailList="detailList[3]" :bg-color="['#9455ce', '#9946c9']"></rank-list-item>
		</div>	
		<h4>全球</h4>
		<music-list :MusicList="topListOther"></music-list>
	</div>
	
  </div>
</template>

<script>
import {_getToplist,_getToplistDetail} from "network/ranklist.js"
import RankListItem from "./childPage/RankListItem.vue"
import MusicList from "components/content/music-list/music-list.vue"


export default {
  name:'RankList',
  components:{RankListItem,MusicList},
  data(){
    return{
      topList:[],
	  topListOther:[],
      detailList:[],
	  topId:null,
	  topIdList:[]
    }
  },
  created(){
	 this.getList() 
  },
  
  methods:{
	getList(){
		_getToplist().then(res=>{
			 this.topList = res.data.list.splice(0,4)
			 this.topListOther = res.data.list.splice(0,res.data.list.length)
			 // console.log(this.topListOther)
			 this.getListDetail()
		}) 
	
	},
    getListDetail(){
		for(let i in this.topList){
			this.topId = this.topList[i].id
			this.topIdList.push(this.topId )
			const params = {id:this.topId}
			_getToplistDetail(params).then(res=>{
				let detailList1 = res.data.playlist.tracks.splice(0,8)
				this.detailList.push(detailList1)
			})
		}
	   
	}
  }
}
</script>

<style lang="less" scoped>
.rank-list{
	padding: 20px 70px;
	.rank-list-content{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
	}
}
</style>